<!--  -->
<template>
    <div>
        <el-container>
      <el-header class="header">
        <h1>青花瓷书店</h1>
      </el-header>
      <el-container>
        <el-aside width="220px">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router  @open="handleOpen"
      @close="handleClose" unique-opened>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>书籍管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/AdminHome/BookSet">书籍设置</el-menu-item>
          <el-menu-item index="/AdminHome/AddBooks">新增书籍</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>管理员管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/AdminHome/AdminQuery">管理员查询</el-menu-item>
          <el-menu-item index="/AdminHome/AdminAdd">新增管理员</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item  index="/AdminHome/ApplyBooks">
        <i class="el-icon-document"></i>
        <span slot="title">预约记录</span>
      </el-menu-item>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>借用管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/AdminHome/BorrowQuery">借阅查询</el-menu-item>
          <el-menu-item index="/AdminHome/UserBorrow">系统用户借阅</el-menu-item>
          <el-menu-item index="/AdminHome/NoUserBorrow">非系统用户借阅</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
        </el-aside>
        <el-main class="conter">
          <router-view name="table"></router-view>
        </el-main>
      </el-container>
    </el-container>
    
    </div>
    </template>
    
    <script>
    export default {
    data() {
    return {
        
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
       
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
        .header{
            text-align: center;
            margin: 30px;
            padding: 15px;
        }
    </style>